<template>
  <div :class="['content', theme == 'light' ? 'light' : 'dark']">
    <swiper
      class="home_swiper"
      :modules="[EffectFade, Autoplay]"
      :autoplay="{
        delay: 4000,
        disableOnInteraction: false,
      }"
      :centeredSlides="true"
      effect="fade"
      :loop="true"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <div style="height: 100%">
          <el-image
            @click="onJump(item.url)"
            style="width: 100%; height: 100%"
            :src="baseUrl + item.image"
          />
        </div>
      </swiper-slide>
      <div class="shadow top"></div>
      <div class="shadow right"></div>
      <div class="shadow bottom"></div>
      <div class="shadow left"></div>
    </swiper>
    <div class="card_item" v-show="newSongList.length">
      <div class="list">
        <div class="left">
          <div class="title">新歌首发</div>
          <div class="play_btn">
            <el-tooltip content="全部播放" placement="top-start">
              <el-button
                @click="onPlayNew"
                :plain="true"
                :type="theme == 'light' ? 'primary' : ''"
                circle
                :icon="CaretRight"
              ></el-button>
            </el-tooltip>
          </div>
        </div>
        <div class="types">
          <span
            @click="selNewSongStyle(item, index)"
            :class="newSongStyleCurrent == index ? 'sel' : ''"
            v-for="(item, index) in styleList"
            :key="index"
            >{{ item.name }}</span
          >
          <!-- <div class="more">
            <span>更多</span>
            <el-icon><ArrowRight /></el-icon>
          </div> -->
        </div>
      </div>
      <div class="new_song_swiper card_swiper">
        <div class="prev">
          <el-button
            @click="newSongPrev"
            :plain="true"
            :icon="ArrowLeftBold"
          ></el-button>
        </div>
        <swiper
          :modules="[Pagination]"
          :pagination="{ clickable: true }"
          :centeredSlides="true"
          @swiper="onNewSongSwiper"
          @slideChange="onNewSongSlideChange"
        >
          <swiper-slide v-for="(item, index) in newSongList" :key="index">
            <div class="new_song_swiper_list">
              <div
                class="item"
                @click="onPlayMusic(index, i)"
                v-for="(e, i) in item"
                :key="e.id"
              >
                <div class="left">
                  <el-image
                    style="width: 100px; height: 100px; border-radius: 4px"
                    :src="baseUrl + e.image"
                    fit="fill"
                  />
                  <div class="info">
                    <span>{{ e.title }}</span>
                    <span>{{ e.user.nickname }}</span>
                  </div>
                </div>
                <span>{{ timeFilter(e.duration) }}</span>
              </div>
            </div>
          </swiper-slide>
        </swiper>
        <div class="next">
          <el-button
            @click="newSongNext"
            :plain="true"
            :icon="ArrowRightBold"
          ></el-button>
        </div>
      </div>
      <div class="card_item" v-show="hotSingerList.length">
        <div class="list">
          <div class="left">
            <div class="title">热门歌手</div>
          </div>
          <div class="types">
            <div class="more" @click="moreUser">
              <span>更多</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
        <div class="hot_singer_swiper card_swiper">
          <div class="prev">
            <el-button
              @click="hotSingerPrev"
              :plain="true"
              :icon="ArrowLeftBold"
            ></el-button>
          </div>
          <swiper
            :modules="[Pagination]"
            :pagination="{ clickable: true }"
            :centeredSlides="true"
            @swiper="hotSingerSwiper"
            @slideChange="hotSingerSlideChange"
          >
            <swiper-slide v-for="(item, index) in hotSingerList" :key="index">
              <div class="hot_singer_swiper_list">
                <div
                  class="item"
                  @click="onUser(e)"
                  v-for="(e, i) in item"
                  :key="e.id"
                >
                  <div class="img">
                    <el-image
                      :src="baseUrl + e.avatar"
                      style="width: 200px; height: 200px; border-radius: 10px"
                      fit="fill"
                    />
                    <div class="avatar">
                      <el-avatar :size="60" :src="baseUrl + e.avatar" />
                    </div>
                  </div>
                  <div class="info">
                    <span>{{ e.nickname }}</span>
                    <!-- <span>华语乐坛天花板</span> -->
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div class="next">
            <el-button
              @click="hotSingerNext"
              :plain="true"
              :icon="ArrowRightBold"
            ></el-button>
          </div>
        </div>
      </div>

      <div class="card_item" v-show="hotAlbumList.length">
        <div class="list">
          <div class="left">
            <div class="title">热门专辑</div>
          </div>
          <div class="types">
            <div class="more" @click="moreAlbum">
              <span>更多</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
        <div class="hot_album_swiper card_swiper">
          <div class="prev">
            <el-button
              @click="hotAlbumPrev"
              :plain="true"
              :icon="ArrowLeftBold"
            ></el-button>
          </div>
          <swiper
            :modules="[Pagination]"
            :pagination="{ clickable: true }"
            :centeredSlides="true"
            @swiper="hotAlbumSwiper"
            @slideChange="hotAlbumSlideChange"
          >
            <swiper-slide v-for="(item, index) in hotAlbumList" :key="index">
              <div class="hot_album_swiper_list">
                <div class="item" v-for="(e, i) in item" :key="e.id">
                  <el-image
                    style="width: 200px; height: 200px"
                    :src="baseUrl + e.image"
                  />
                  <div class="mask">
                    <i class="iconfont icon-bofang"></i>
                  </div>
                  <div class="info">
                    <span>{{ e.title }}</span>
                    <span>{{ e.user?.name }}</span>
                  </div>
                  <span class="tag">{{ e.tag[0] }}</span>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div class="next">
            <el-button
              @click="hotAlbumNext"
              :plain="true"
              :icon="ArrowRightBold"
            ></el-button>
          </div>
        </div>
      </div>

      <div class="card_item" v-show="hotVideoList.length">
        <div class="list">
          <div class="left">
            <div class="title">热门视频</div>
          </div>
          <div class="types">
            <div class="more" @click="moreVideo">
              <span>更多</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
        <div class="hot_video_swiper card_swiper">
          <div class="prev">
            <el-button
              @click="hotVideoPrev"
              :plain="true"
              :icon="ArrowLeftBold"
            ></el-button>
          </div>
          <swiper
            :modules="[Pagination]"
            :pagination="{ clickable: true }"
            :centeredSlides="true"
            @swiper="hotVideoSwiper"
            @slideChange="hotVideoSlideChange"
          >
            <swiper-slide v-for="(item, index) in hotVideoList" :key="index">
              <div class="hot_video_swiper_list">
                <div
                  class="item"
                  @click="onPlayHotVideo(e)"
                  v-for="(e, i) in item"
                  :key="e.id"
                >
                  <el-image
                    style="width: 100px; height: 100px; border-radius: 4px"
                    :src="baseUrl + e.image"
                  />
                  <div class="mask">
                    <i class="iconfont icon-bofang"></i>
                  </div>
                  <div class="info">
                    <span>{{ e.title }}</span>
                    <div class="bottom">
                      <el-icon><View /></el-icon>
                      <span>6人观看</span>
                    </div>
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div class="next">
            <el-button
              @click="hotVideoNext"
              :plain="true"
              :icon="ArrowRightBold"
            ></el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { EffectFade, Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/bundle";
import {
  CaretRight,
  ArrowLeftBold,
  ArrowRightBold,
} from "@element-plus/icons-vue";
import { ref, computed, onMounted, watch } from "vue";
import { PersistentStore } from "@/stores";
import { useRouter } from "vue-router";
import {
  slideIndex,
  indexNewMusic,
  indexHotUser,
  indexHotAlbum,
  indexHotVideo,
  styleIndex,
} from "@/http/api";

const baseUrl = import.meta.env.VITE_API_URL;
const router = useRouter();
const persistentStore = PersistentStore();
const theme = computed(() => persistentStore.theme);

const styleList = ref([]);

// 轮播图列表
const home_swiper = ref();
const swiperList = ref([]);

// 新歌首发
const new_song_swiper = ref();
const newSongList = ref([]);
const newSongStyleCurrent = ref(0);

// 热门歌手
const hot_singer_swiper = ref();
const hotSingerList = ref([]);

// 热门专辑
const hot_album_swiper = ref();
const hotAlbumList = ref([]);

// 热门视频
const hot_video_swiper = ref();
const hotVideoList = ref([]);

onMounted(() => {
  getSwiper();
  getNewMusic();
  getHotSinger();
  getHotAlbum();
  getHotVideo();
  getStyle();
});

const timeFilter = (e) => {
  let timeFormat = "00:00";
  if (e) {
    let minutes = Math.floor(e / 60);
    let second = e % 60;
    timeFormat =
      minutes.toString().padStart(2, "0") +
      ":" +
      second.toString().padStart(2, "0");
  }
  return timeFormat;
};

const moreAlbum = () => {
  router.push("/album");
};

const onUser = (e) => {
  router.push({
    name: "user",
    query: {
      id: e.id,
    },
  });
};

const moreVideo = () => {
  router.push("/video");
};

const moreUser = () => {
  router.push("/singer");
};

const onJump = (e) => {
  window.open(e);
};

// 轮播图
const getSwiper = async () => {
  const { data } = await slideIndex();
  swiperList.value = data.slide;
};
// 新歌首发
const getNewMusic = async (e) => {
  const { data } = await indexNewMusic({
    style: e?.id,
  });
  newSongList.value = data.data;
};
const selNewSongStyle = (e, i) => {
  newSongStyleCurrent.value = i;
  new_song_swiper.value.slideTo(0, 500, false);
  getNewMusic(e);
};
// 热门歌手
const getHotSinger = async () => {
  const { data } = await indexHotUser();
  hotSingerList.value = data.data;
};
// 热门专辑
const getHotAlbum = async () => {
  const { data } = await indexHotAlbum();
  hotAlbumList.value = data.data;
};
// 热门视频
const getHotVideo = async () => {
  const { data } = await indexHotVideo();
  hotVideoList.value = data.data;
};

const getStyle = async () => {
  const { data } = await styleIndex();
  styleList.value = [
    {
      id: "",
      name: "最新",
    },
    ...data.style.slice(0, 4),
  ];
};

// swiper
const onSwiper = (swiper) => {
  home_swiper.value = swiper;
};
const onNewSongSwiper = (swiper) => {
  new_song_swiper.value = swiper;
};
const hotSingerSwiper = (swiper) => {
  hot_singer_swiper.value = swiper;
};
const hotAlbumSwiper = (swiper) => {
  hot_album_swiper.value = swiper;
};
const hotVideoSwiper = (swiper) => {
  hot_video_swiper.value = swiper;
};

const onSlideChange = () => {};
const onNewSongSlideChange = () => {};
const hotSingerSlideChange = () => {};
const hotAlbumSlideChange = () => {};
const hotVideoSlideChange = () => {};

// 播放全部
const onPlayNew = () => {
  const allArr = newSongList.value.flat(1);
  const url = router.resolve("/play_music");
  const arr = { id: "", index: 0, list: allArr };
  persistentStore.setSongListInfo(arr);
  window.open(url.href, url.href).postMessage(JSON.stringify(arr));
};
const onPlayMusic = (index, i) => {
  const arrAll = newSongList.value.flat(1);
  const url = router.resolve("/play_music");
  const arr = { id: "", index: i + index * 9, list: arrAll };
  persistentStore.setSongListInfo(arr);
  window.open(url.href, url.href).postMessage(JSON.stringify(arr));
};

const onPlayHotVideo = (e) => {
  persistentStore.setVideoId(e.id);
  const url = router.resolve("/play_video");
  window.open(url.href, url.href).postMessage(e.id);
};
// 上一页
const newSongPrev = () => {
  new_song_swiper.value.slidePrev();
};
const hotSingerPrev = () => {
  hot_singer_swiper.value.slidePrev();
};
const hotAlbumPrev = () => {
  hot_album_swiper.value.slidePrev();
};
const hotVideoPrev = () => {
  hot_video_swiper.value.slidePrev();
};
// 下一页
const newSongNext = () => {
  new_song_swiper.value.slideNext();
};
const hotSingerNext = () => {
  hot_singer_swiper.value.slideNext();
};
const hotAlbumNext = () => {
  hot_album_swiper.value.slideNext();
};
const hotVideoNext = () => {
  hot_video_swiper.value.slideNext();
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
